<template>
    <div>
        <van-dropdown-menu>
            <van-dropdown-item disabled title="全部" />
            <van-dropdown-item v-model="value1" :options="option1" title="价格" @change="changePrice" />
            <van-dropdown-item v-model="value2" :options="filterCategory" title="分类" @change='changeKind' />
        </van-dropdown-menu>
    </div>
</template>
<script>


export default {
    name: '',
    props: ['filterCategory'],
    data() {
        return {
            value1: 'desc', //由高到低
            // value2: 'a',
            option1: [
                { text: '价格由高到低', value: 'desc' },
                { text: '价格由低到高', value: 'asc' },

            ],
            // option2: [
            //     { text: '默认排序', value: 'a' },
            //     { text: '好评排序', value: 'b' },
            //     { text: '销量排序', value: 'c' },
            // ],
        }
    },
    components: {
    },
    watch: {},
    methods: {
        changePrice(value) {
            //切换价格排序
            console.log('111',value);
        },
        changeKind(val) {
            //切换分类
            console.log(111,val);
        },
        changePrice(val) {
            //切换价格排序
            //  console.log(val);
            //通过子传父的方式 传给search 组件 然后search 组件拿到这个数据 重新进行请求渲染 
            this.$emit('transfer', val)
        },
        changeKind(val) {
            //切换类别 方法同上
            this.$emit("transfer1", val);
        }
    },

    created() { },
    computed: {
        value2: {
            get() {
                //通过this.filterCategory 这个数组中的哪一项是checked 那么该项对应的id 就是value 的值
                let id = 0;
                this.filterCategory.forEach((item) => {
                    if (item.checked) {
                        id = item.value
                    }
                });
                return id
            },
            set(val) { }
        }
    }
};
</script>
<style scoped>
</style>